import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Layout, Menu } from 'antd'
import Link from 'next/link'
// prefetch预加载
import MyHead from '../myHead/index'
const { Header, Footer } = Layout;
import * as ROUTER from '../../config/constant'
import './headNav.module.scss'

const routers = [
  {
    href: ROUTER.INDEX,
    txt: ROUTER.INDEX_TXT,
    authority: false,
  },
  {
    href: ROUTER.BLOG,
    txt: ROUTER.BLOG_TXT,
    authority: false,
  },
  {
    href: ROUTER.LIFE,
    txt: ROUTER.LIFE_TXT,
    authority: false,
  },
  {
    href: ROUTER.COLLECT,
    txt: ROUTER.COLLECT_TXT,
    authority: false,
  },
  {
    href: ROUTER.PUBLISH,
    txt: ROUTER.PUBLISH_TXT,
    authority: false,
  }
];

class HeadNav extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isLogin: false,
      isAll: false,
      selectedKeys: '',
      defaultSelectedKeys: ['/']
    }
  }

  onMyFn(item) {
    return <Menu.Item key={item.txt}>
      <Link prefetch href={item.href}>
        <a>{item.txt}</a>
      </Link>
    </Menu.Item>;
  }

  onSelect() {

  }

  render() {
    const { isLogin, selectedKeys, defaultSelectedKeys } = this.state
    let newRouters;
    if (isLogin) {
      newRouters = routers
    } else {
      newRouters = routers.filter(item => !item.authority)
    }
    return (
      <Header style={{
        height: '64px',
        position: 'fixed',
        width: '100%',
        zIndex: 10,
        overflow: 'hidden'
      }}>
        <div className="logo">
          <img alt="logo" src="/image/nlx.png" />
        </div>
        <Menu
          theme="dark"
          defaultSelectedKeys={defaultSelectedKeys}
          onClick={this.onSelect.bind(this)}
          className="menu"
          style={{
            lineHeight: '64px',
            float: 'left',
            padding: '0 15px'
          }}
          selectedKeys={selectedKeys}
          mode="horizontal">
          {
            newRouters.map((item, index) => {
              return this.onMyFn(item)
            })
          }
        </Menu>
        <style jsx>{`
          .logo{
            float: left;
            height: 100%;
            padding: 12px 0;
          }
          .logo>img{
            height: 30px;
            display: block;
            margin-top: 2px;
          }
        
        `}</style>
      </Header>
    )
  }
}

export default HeadNav